<template>
  <el-descriptions
      :column="1"
      :title="title"
      border
      label-width="100"
  >
    <el-descriptions-item v-for="field in props.fields" :label="field.label">
      <template #default>
        <!-- 使用自定义渲染插槽 -->
        <slot :field="field" :name="field.prop" :row="data">
          <base-image
              v-if="field.type === 'image' || field.type === 'image-list'"
              :size="40"
              :src="data[field.prop]"
          />

          <el-rate
              v-else-if="field.type === 'rating'"
              v-model="data[field.prop]"
              disabled
          />

          <el-switch
              v-else-if="field.type === 'switch'"
              v-model="data[field.prop]"
              :active-text="field.options[1].label"
              :active-value="field.options[1].value"
              :inactive-text="field.options[0].label"
              :inactive-value="field.options[0].value"
              disabled
          />

          <template v-else-if="field.type === 'datetime'">
            <div v-if="data[field.prop]">
              <el-icon>
                <Timer/>
              </el-icon>
              <span>{{ data[field.prop] }}</span>
            </div>
            <span v-else>-</span>
          </template>

          <template v-else-if="field.type === 'tag'">
            <el-tag
                :type="getTagType(field.options, data[field.prop])"
                size="large"
            >
              {{ getEnumLabel(field.options, data[field.prop]) }}
            </el-tag>
          </template>

          <!-- 默认文本类型 -->
          <el-text v-else line-clamp="2">
            {{ data[field.prop] || '-' }}
          </el-text>
        </slot>
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup>
import BaseImage from "@/components/common/BaseImage.vue";
import {getEnumLabel, getTagType} from "@/utils/utils.js";
import {Timer} from "@element-plus/icons-vue";

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  fields: {
    type: Array,
    required: true
  },
  data: {
    type: Object,
    required: true
  },
})
</script>

<style scoped>

</style>